import React, { Component } from 'react';
import ColorPalette from '../../components/color-palette/color-palette';
import './tool-palette.scss';

class ToolPalette extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isShowColorPalette: false,
        };
    }

    toggleColor = () => {
        const isShow = this.state.isShowColorPalette;
        this.setState({
            isShowColorPalette: !isShow,
        });
    };

    wipe = e => {};

    /**
     * 导出绘制
     */
    downPngFile() {
        const canvas = document.getElementById('drawing-canvas');
        if (canvas) {
            const img = canvas.toDataURL('image/png');
            const link = document.createElement('a');
            link.href = img;
            link.download = 'canvas.png';
            link.click();
        }
    }

    render() {
        return (
            <div
                className='tool-palette'
                style={{ '--tool-color': this.props.toolColor }}
            >
                <button
                    className='color-swatch'
                    onClick={() => this.toggleColor()}
                    title='调色板'
                />
                {this.state.isShowColorPalette ? (
                    <ColorPalette
                        fontColor={this.props.toolColor}
                        changeBrushColor={this.props.changeBrushColor}
                    />
                ) : (
                    ''
                )}
                <button
                    className='tool-option-button'
                    title='调整笔刷大小和透明度'
                >
                    <svg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'>
                        <path
                            className='tool-option-button-light-body'
                            d='M12.78,7.66,10.35,5.22,4,11.56V14H6.44Zm2.09-2.1a.42.42,0,0,0,0-.6L13,3.13a.42.42,0,0,0-.6,0L11.29,4.28l2.44,2.44Z'
                        />
                        <polygon
                            className='tool-option-button-stroke-color'
                            points='17 13 17 17 3 17 17 13'
                        />
                        <path
                            className='tool-option-button-stroke-outline'
                            d='M3,17L17,13L17,16L16,16L16,14.34L10.18,16L17,16L17,17z'
                        />
                        <path
                            className='tool-option-button-dark-body'
                            d='M12.78,7.66,11.56,6.44,4,14H6.44Zm2.09-2.1a.42.42,0,0,0,0-.6L14,4,12.51,5.49l1.22,1.22Z'
                        />
                    </svg>
                </button>
                <div className='stroke' />
                <form className='tools-container'>
                    <input
                        type='radio'
                        id='pencil'
                        name='tool-selection'
                        value='PENCIL'
                        onClick={() => {
                            this.props.changeBrushType('PENCIL');
                        }}
                    />
                    <label htmlFor='pencil' title='铅笔'>
                        <svg
                            id='pencil-svg'
                            className='tool-button'
                            aria-hidden='true'
                            xmlns='http://www.w3.org/2000/svg'
                        >
                            <g fill='none' fillRule='evenodd'>
                                <path
                                    className='pencil-tip'
                                    d='M95.37 16.765A.777.777 0 0 0 96 16a.777.777 0 0 0-.63-.765L89.418 13a10.989 10.989 0 0 0 0 6l5.953-2.235z'
                                />
                                <path
                                    className='pencil-collar'
                                    d='M67.133 5l1.5 2.422c.212.378.102.792-.156 1.098 0 0-1.435 1.76-2.18 2.389a.77.77 0 0 0-.213.961l2.15 3.43a1.544 1.544 0 0 1 .002 1.4l-2.152 3.43a.77.77 0 0 0 .217.962c.754.62 2.176 2.388 2.176 2.388.258.307.368.72.156 1.098L67.133 27l15.038-5.486 5.882-2.13.947-.343a10.766 10.766 0 0 1 0-6.079l-.947-.343-5.882-2.13L67.133 5z'
                                />
                                <path
                                    className='pencil-dark-handle'
                                    d='M66.7 20.115l2.132-3.418h.002a1.545 1.545 0 0 0 0-1.394h-.002L66.7 11.885a.77.77 0 0 1 .133-.885H4v10h62.833a.77.77 0 0 1-.133-.885'
                                />
                                <path
                                    className='pencil-light-handle'
                                    d='M66.595 10.92c.764-.594 2.141-2.398 2.141-2.398.254-.306.363-.72.153-1.097L67.41 5.006 4.021 5 4 11h62.509a.786.786 0 0 1 .086-.08M66.596 21.095c.742.622 2.14 2.383 2.14 2.383.254.306.363.72.153 1.097l-1.48 2.419L4.022 27 4 21h62.5c.027.028.064.068.096.095'
                                />
                            </g>
                        </svg>
                    </label>

                    <input
                        type='radio'
                        id='inkpen'
                        name='tool-selection'
                        value='INKPEN'
                        onClick={() => {
                            this.props.changeBrushType('INKPEN');
                        }}
                    />
                    <label htmlFor='inkpen' title='钢笔'>
                        <svg
                            id='inkpen-svg'
                            className='tool-button'
                            aria-hidden='true'
                            xmlns='http://www.w3.org/2000/svg'
                        >
                            <g fill='none' fillRule='evenodd'>
                                <path
                                    className='inkpen-accent'
                                    d='M48 5L4 4v23.965L48 27z'
                                />
                                <path
                                    className='inkpen-shadow'
                                    d='M4 21.224V28l43.61-1.002v-5.774z'
                                />
                                <path
                                    className='inkpen-nib'
                                    d='M76.097 24.8c.22-.041.443-.09.667-.143.12-.028.24-.06.36-.091.09-.024.179-.046.27-.071.176-.049.354-.1.532-.155l.02-.007c2.697-.827 5.492-2.294 8.048-3.81l.04-.023h-.002c.69-.41 1.363-.821 2.011-1.225C91.657 17.024 95 16.384 95 16.384V16H56.012v4.164a.194.194 0 0 0-.012-.002v2.387l8.388 1.278c.532.054 1.063.116 1.593.184l.168.022a61.717 61.717 0 0 1 2.935.454c1.256.227 2.753.47 4.28.507.915.024 1.841-.025 2.733-.193M95 14.685s-3.344-.708-6.959-2.96c-1.466-.912-3.056-1.868-4.692-2.734-2.4-1.27-4.9-2.345-7.258-2.791-2.377-.45-4.999-.05-7.003.313a61.885 61.885 0 0 1-4.697.66L56 8.451V15h39v-.315zM51 5l-4.483-.036C46.184 8.328 46 12.201 46 16.093c0 3.893.184 7.579.517 10.944L51 27V5z'
                                />
                                <path
                                    className='inkpen-channel'
                                    d='M75.114 13.297a2.25 2.25 0 1 1-.001 4.5 2.25 2.25 0 0 1 .001-4.5'
                                />
                                <path
                                    className='inkpen-channel'
                                    d='M56 15v1h39v-1z'
                                />
                                <path
                                    className='inkpen-section'
                                    d='M54 27.204V4.796c0-.44-.435-.796-.97-.796h-1.06c-.535 0-.97.356-.97.796v22.408c0 .44.435.796.97.796h1.06c.535 0 .97-.357.97-.796'
                                />
                                <path
                                    className='inkpen-collar'
                                    d='M54 15.747V27l1.688-1.394a.827.827 0 0 0 .298-.638V21.55l.014-.018v-.061l-.014-1.513v-.13c.005-.007.01-.013.014-.021v-3.134l-.014-1.74-.001.002-.012-2.368s.006-5.702-.006-5.76a.825.825 0 0 0-.279-.413L54 5v10.747zM95 14.536c.552 0 1 .453 1 1.012 0 .559-.448 1.012-1 1.012s-1-.453-1-1.012c0-.56.448-1.012 1-1.012'
                                />
                            </g>
                        </svg>
                    </label>

                    <input
                        type='radio'
                        id='stroke-editing-eraser'
                        name='tool-selection'
                        value='STROKE_EDITING_ERASER'
                        onClick={() => {
                            this.props.changeBrushType('STROKE_EDITING_ERASER');
                        }}
                    />
                    <label htmlFor='stroke-editing-eraser' title='橡皮擦'>
                        <svg
                            id='eraser-svg'
                            className='tool-button'
                            aria-hidden='true'
                            xmlns='http://www.w3.org/2000/svg'
                        >
                            <g fill='none' fillRule='evenodd'>
                                <path
                                    className='eraser-tip eraser-shadow'
                                    d='M91.256 19.824h-15.39A158.925 158.925 0 0 1 75.5 27.5h16.593c2.394 0 4.407-5.58 4.407-12.463 0-1.603-.077-3.13-.211-4.537-.703 5.36-3.075 9.324-5.033 9.324'
                                />
                                <path
                                    className='eraser-tip'
                                    d='M91.175 21.5c2.07 0 4.582-4.136 5.325-9.73-.47-4.838-1.906-8.27-4.44-8.27H74.5c.284 3.811.448 8.256.448 13.005 0 1.71-.021 3.38-.061 4.995h16.288z'
                                />
                                <path
                                    className='eraser-handle'
                                    d='M3.5 3.5v24h76v-24z'
                                />
                                <path
                                    className='eraser-shadow'
                                    d='M52 27.5H3.5v-6h76v6H52z'
                                />
                                <path
                                    className='eraser-ferrule'
                                    d='M71.3 27.5s.497-3.903.497-12-.497-12-.497-12M67.7 27.5s.497-3.903.497-12-.497-12-.497-12M64.003 27.5s.497-3.903.497-12-.497-12-.497-12M60.003 27.5s.497-3.903.497-12-.497-12-.497-12'
                                    strokeWidth='.817'
                                    strokeLinecap='round'
                                    strokeLinejoin='round'
                                />
                            </g>
                        </svg>
                    </label>
                </form>

                <div className='stroke' />
                <button
                    className='tool-option-button'
                    title='导出绘制'
                    onClick={() => this.downPngFile()}
                >
                    <svg
                        className='save-icon'
                        viewBox='0 0 1024 1024'
                        xmlns='http://www.w3.org/2000/svg'
                    >
                        <path
                            className='save-icon-body'
                            d='M795.2 304h-108v-72.8c0-49.7-40.3-90.1-90.1-90.1h-390c-49.7 0-90.1 40.3-90.1 90.1v390c0 49.7 40.3 90.1 90.1 90.1h121.7V771c0 48 39.1 86.8 87.4 86.8h378.9c48.3 0 87.4-38.9 87.4-86.8V390.8c0.1-47.9-39-86.8-87.3-86.8z m-417.4-40.8c0-13.5 10.9-24.4 24.4-24.4s24.4 10.9 24.4 24.4v16.3c0 13.5-10.9 24.4-24.4 24.4s-24.4-10.9-24.4-24.4v-16.3z m-90.5 246.7c-9.9-9.9-9.9-26 0-35.9s26-9.9 35.9 0l54.7 54.7V360.9c0-13.5 10.9-24.4 24.4-24.4s24.4 10.9 24.4 24.4v167.7l54.7-54.7c9.9-9.9 26-9.9 35.9 0 9.9 9.9 9.9 26 0 35.9l-95.8 95.8c-3.8 3.8-8.7 6.2-13.8 7.1-1.8 0.4-3.6 0.6-5.5 0.6s-3.7-0.2-5.5-0.6c-5-0.8-9.8-3.2-13.8-7.1l-95.6-95.7z m530.1 254.5c0 15.5-12.7 28.1-28.2 28.1H422.3c-15.5 0-28.2-12.6-28.2-28.1v-53.3h203.2c49.7 0 90.1-40.3 90.1-90.1V369h102c15.5 0 28.2 12.6 28.2 28.1v367.3h-0.2z'
                        />
                    </svg>
                </button>
            </div>
        );
    }
}

export default ToolPalette;
